<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="<%=basePath %>css/bootstrap.min.css"/>
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
		.mywell{
			margin-top:25px;
		}
	</style>
</head>
<body class="body">
	<%@ include file = "../include/sametop.jsp" %>
	<div class="container">
		<div class="row">
			<jsp:include page="../include/sameleft.jsp">
				<jsp:param value="contact" name="tag"/>
			</jsp:include>
			<div class="span9"  style="border-radius: 3px 3px 0 0;margin-top:10px">
				 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
					<li class="active" style="margin-top:5px"><i class="icon-th"></i>新建联系人</a></li>
				</ul>
				
				<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
					
					<div style="margin-top:20px;">					
						<ul class="nav nav-tabs">
							  <li  class="active" style="font-size:12px" id="myli1"><a href="#home" class="btn " data-toggle="tab"><i class="icon-plus  icon-white"></i>新建一个联系人</a></li>
							  <li style="font-size:12px" id="myli2"><a href="#profile"  class="btn" data-toggle="tab"><i class="icon-plus  icon-white"></i>新建一个公司</a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="home" >
								<div style="margin-left:0px">
									<div class="wall">							
										<form class="form-horizontal" action="<%=basePath%>contact/saveContact.action" method="post">
												<fieldset>
												<div class="control-group" >
													<label class="control-label" for="input01">姓名</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.name" id="oldname" >
														<input type="hidden" class="span4" name="contact.type"  value="person">
														
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="input01">公司</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.company" id="oldcompany">
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="input01">职位</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.title" id="oldtitle">
													</div>
												</div>
												<hr>
												<div style="margin-bottom:20px" class="mediv">
													<label class="control-label" for="input01">手机</label>																											
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="tel" class="myphone" >
														<select class="span1" name="teltype">
															<option value="个人">个人</option>
															<option value="工作">工作</option>
															<option value="家庭">家庭</option>
															<option value="其他">其他</option>
													  	</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a> </span> 
													</div>		
												</div>				
												<div style="margin-bottom:20px" class="mediv2">
													<label class="control-label" for="input01">邮箱</label>
													<div  class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="email" id="input01" class="myemail" >
														<select style="width:85px" name="emailtype">
															<option value="163邮箱">163邮箱</option>
															<option value="139邮箱">139邮箱</option>
															<option value="qq邮箱">qq邮箱</option>
													  	</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a></span> 
													</div>
												</div>
												<div style="margin-bottom:20px"  class="mediv3">
													<label class="control-label" for="input01">地址</label>
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="address" id="input01" class="myaddress" >
														<select class="span1" name="addresstype">
															<option value="家庭">家庭</option>
															<option value="工作">工作</option>
															<option value="其他">其他</option>
														</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a> </span> 
													</div>
												</div>
												<hr>
												<div class="control-group">
													<label class="control-label" for="input01">主页</label>
													<div class="controls">
														<input type="text" name="contact.mainpage" class="span4" name="contact.mainpage" id="oldmainpage">
														<p class="help-block">http://www.xxx.com</p>
													</div>
												</div>
												<div class="control-group">
													<div style="margin-left:115px">设置联系人可见性:</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="all" checked="checked" class="mylook3">对所有人可见</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="me" class="mylook3">仅自己可见</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandgroup" class="mylook1">我，和这个小组可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look1">	
														<select  style="margin-left:10px;width:100px;" name="groupview">
															<option>请选择小组</option>
															<c:forEach items="${grouplist}" var="group">
																<option value="${group.name}">${group.name}</option>
															</c:forEach>
														</select>
													</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="allandother" class="mylook2">我，和这些人可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look2">	
														<select  style="margin-left:10px;width:100px" name="personview">
															<option>请选择姓名</option>
															<c:forEach items="${list}" var="con">
																<option value="${con.name}">${con.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												
											
												<div class="form-actions">
													<button type="submit" class="btn btn-primary">保存</button>
													<button class="btn" onclick="location.back()">返回</button>
											  </div>
												</fieldset>
										</form>
									
									</div>
								</div>
							</div>
							<div class="tab-pane" id="profile">
								 <div style="margin-left:0px">
									<div class="wall">							
										<form class="form-horizontal" action="<%=basePath%>contact/saveContact.action" method="post">
												<fieldset>
												
												<div class="control-group">
													<label class="control-label" for="input01">公司名</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.name" id="input01">
														<input type="hidden" class="span4" name="contact.type"  value="company">
													</div>
												</div>												
												<hr>
												<div style="margin-bottom:20px" class="mediv">
													<label class="control-label" for="input01">手机</label>																											
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="tel" class="myphone" >
														<select class="span1" name="teltype">
															<option value="个人">个人</option>
															<option value="工作">工作</option>
															<option value="家庭">家庭</option>
															<option value="其他">其他</option>
													  </select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash" > <i class="icon-trash"></i></a> </span> 
													</div>		
												</div>				
												<div style="margin-bottom:20px" class="mediv2">
													<label class="control-label" for="input01">邮箱</label>
													<div  class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="email" id="input01" class="myemail" >
														<select style="width:85px" name="emailtype">
															<option value="163邮箱">163邮箱</option>
															<option value="139邮箱">139邮箱</option>
															<option value="qq邮箱">qq邮箱</option>
													  </select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a></span> 
													</div>
												</div>
												<div style="margin-bottom:20px"  class="mediv3">
													<label class="control-label" for="input01">地址</label>
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="address" id="input01" class="myaddress" >
														<select class="span1" name="addresstype">
															<option value="家庭">家庭</option>
															<option value="工作">工作</option>
															<option value="其他">其他</option>
														</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a> </span> 
													</div>
												</div>
												<hr>
												<div class="control-group">
													<label class="control-label" for="input01">主页</label>
													<div class="controls">
														<input type="text" name="contact.mainpage" class="span4" name="contact.mainpage" id="input01">
														<p class="help-block">http://www.xxx.com</p>
													</div>
												</div>
												<div class="control-group">
													<div style="margin-left:115px">设置联系人可见性:</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="all" checked="checked" class="mylook3">对所有人可见</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="me" class="mylook3">仅自己可见</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandgroup" class="mylook1">我，和这个小组可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look1">	
														<select  style="margin-left:10px;width:100px;" name="groupview">
															<option>请选择小组</option>
															<c:forEach items="${grouplist}" var="group">
																<option value="${group.name}">${group.name}</option>
															</c:forEach>
														</select>
													</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandother" class="mylook2">我，和这些人可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look2">	
														<select  style="margin-left:10px;width:100px" name="personview">
															<option>请选择姓名</option>
															<c:forEach items="${list}" var="con">
																<option value="${con.name}">${con.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												
												
												
												<div class="form-actions">
													<button type="submit" class="btn btn-primary">保存</button>
													<button class="btn" onclick="location.back()">返回</button>
											  </div>
												</fieldset>
										</form>
									</div>
							</div>
						</div>
				 	 </div>				
				</div> 
			</div>
		</div>
	</div>	
</div>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
				//设置转化条选中时的颜色
				$("#myli1 a").css("color","white");
				$("#myli1 a").addClass("btn-inverse");//默认显示颜色
				$("#myli1").click(function(){
					$("#myli1 a").css("color","white");
					$("#myli1 a").addClass("btn-inverse");
					$("#myli2 a").css("color","black");
					$("#myli2 a").removeClass("btn-inverse");
				});
				$("#myli2").click(function(){
					$("#myli2 a").css("color","white");
					$("#myli2 a").addClass("btn-inverse");
					$("#myli1 a").css("color","black");
					$("#myli1 a").removeClass("btn-inverse");
				});
				/*可见性设置问题：*/
				$(".mylook1").click(function(){
					$(".look2").hide();
					$(".look1").show();
				});
				$(".mylook2").click(function(){
					$(".look1").hide();
					$(".look2").show();
				});
				$(".mylook3").click(function(){
					$(".look2").hide();
					$(".look1").hide();
				});
		
		
		
			/*添加多个电话*/
			var m = 1;
				$(".myphone").live("keyup", function(){  
					var name = $(this).val();
					//alert(name.length);
					//alert("keyup");  
					//当文本框有内容时
					if(name.length!=0 && m==1){
						$(".mediv").append($("<div class='controls' ><a href='javaScript:;' class='add' >点击添加</a></div>"));
						m=0;									
					}
					
				});
				//当添加被点击时
				$(".add").live("click",function(){
					$(".add").remove();
					m=1;
					//alert("hehe");
					$(".mediv").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px'name='tel' class='myphone'><select class='span1' name='teltype'><option value='个人'>个人</option><option value='工作'>工作</option><option value='家庭'>家庭</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash' onClick='del('v')'> <i class='icon-trash'></i></a>  </span> </div>"));
				});
				
				$(".mytrash").live("click",function(){
					var r=$(this).parent().parent().attr("id");
					//alert(r);
					$(this).parent().parent().empty();				
				});
				
				
				
				/*添加多个邮箱*/
				var  b=1;
				$(".myemail").live("keyup",function(){  
					var nam = $(this).val();
					 
					//当文本框有内容时
					if(nam.length!=0 && b==1 ){
						$(".mediv2").append($("<div class='controls'><a href='javaScript:;' class='add2' >点击添加</a></div>"));
						b=0;
					}
					
				});
				
				//当添加被点击时
				$(".add2").live("click",function(){
					$(".add2").remove();
					b=1;
					$(".mediv2").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px' name='email' class='myemail'><select style='width:85px;margin-left:5px' name='emailtype'><option value='163邮箱'>163邮箱</option><option value='139邮箱'>139邮箱</option><option value='qq邮箱'>qq邮箱</option></select><a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});
				
				
				
				/*添加多个地址*/
				var e=1;
				$(".myaddress").live("keyup",function(){  
					var nam = $(this).val();					  
					//当文本框有内容时
					if(nam.length!=0 && e==1){
						$(".mediv3").append($("<div class='controls'><a href='javaScript:;' class='add3' >点击添加</a></div>"));
						e=0;						
						}				
				});
				
				//当添加被点击时
				$(".add3").live("click",function(){
					$(".add3").remove();
					e=1;
					$(".mediv3").append($("<div class='controls' style='margin-top:5px'  id='trash'><input type='text' name='address' style='width:210px' class='myaddress'><select class='span1' name='addresstype'><option value='家庭'>家庭</option><option value='工作'>工作</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});			
		});
	</script>
</body>
</html>